<template>
    <div style="background-color: #f2f2f2; height: 100vh;" class="bg">
        <div class="van-nav-bar__content bg" style="background-color: white;">
            <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow"><!----></i><span
                    class="van-nav-bar__text" @click="Loss">返回</span></div>
            <div class="van-nav-bar__title van-ellipsis"></div>
        </div>
        <div class="imgs">
            <div>头像</div>
            <div><span style=" overflow: hidden; display: block;"><van-uploader v-model="fileList" multiple :max-count="1"
                        preview-size="50px" :after-read="abc" /></span></div>
        </div>
        <div  role="button" tabindex="0" class="van-cell van-cell--clickable">
            <div  class="van-cell__title"><span >昵称</span></div>
            <div  class="van-cell__value"><span >{{ username.nickName }}</span></div><i
                 class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
        </div>
        <div  role="button" tabindex="0" class="van-cell van-cell--clickable">
            <div  class="van-cell__title"><span >性别</span></div>
            <div  class="van-cell__value"><span >保密</span></div><i 
                class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
        </div>
        <div  role="button" tabindex="0" class="van-cell van-cell--clickable">
            <div  class="van-cell__title"><span >密码设置</span></div><i 
                class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
        </div>
        <div  role="button" tabindex="0" class="van-cell van-cell--clickable">
            <div class="van-cell__title"><span >手机号</span></div>
            <div  class="van-cell__value"><span >{{ username.mobile }}</span></div><i
                 class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
        </div>
        <button class="user_quit van-button van-button--default van-button--large" style="margin-top: 20px;" @click="tui">
            <div class="van-button__content"><span
                    class="van-button__text">退出当前账户</span></div>
        </button>
    </div>
</template>

<script>
import { infoss } from "@/api/index"

export default {
    name: "mainset",
    data() {
        return {
            fileList: [],
            username: "",
        }
    },
    methods: {
        tui() {
            localStorage.removeItem("token")
            localStorage.removeItem("userInfo")
            // window.location.reload();
            this.$router.push({ path: "/" })
        },
        Loss() {
            this.$router.go(-1)
        },
        abc(event) {
            console.log(this.fileList)
        }
    },
    mounted() {
        infoss().then(res => {
            console.log(res.data.data)
            this.username = res.data.data
            this.fileList.push(res.data.data.avatar)
        })
    }
}
</script>
<style lang="scss">
.imgs {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #F5F6F7;
    border-bottom: 1px solid #F5F6F7;
    height: 50px;
    padding: 10px 16px;
    background-color: white;

    div {
        // border: 1px solid red;
        font-size: 14px;
        // width: 30%;
    }
}</style>